<:!:/>

@file list-view.html
@author Alejandro Dario Simi
@date $Date: 2013-06-16 19:41:09 +0000 (Sun, 16 Jun 2013) $

$Id: list-view.html 72 2013-06-16 19:41:09Z daemonraco@gmail.com $
$URL: http://wcomix.googlecode.com/svn/tags/wcomix-1.0.0.1/themes/mdefault/templates/generics/list-view.html $

@note Here I thank to the people of stackoverflow: http://stackoverflow.com/questions/16799936/css-boxing-long-not-wrapped-texts-with-scroll-and-not-autoexpands


<::/>
<script type="text/javascript">
	function UpdateSize(id) {
		var zImg = $("#ZOOM_IMG_" + id);
		var tImg = $("#IMG_" + id);

		var iHeight = zImg.height();
		var iWidth = zImg.width();
		var tHeight = 40;
		var tWidth = 40;

		if(iWidth > iHeight) {
			tWidth = 40;
			tHeight = Math.round(40 * iHeight / iWidth);
		} else {
			tWidth = Math.round(40 * iWidth / iHeight);
			tHeight = 40;
		}

		tImg.css({
			height: tHeight,
			width: tWidth
		});
	}
</script>

<:ISSET:var=MenuListsInfo:/><div class="ListViewSection">Information</div>
<div class="ListViewInfo"><:OVER:list=MenuListsInfo:/>
	<div class="InfoEntry">
		<div class="Label"><:VAR:/>label<::/>:</div>
		<div class="Value"><:ISSET:var=url:/><a href="<:VAR:/>url<::/>"><:VAR:/>value<::/></a><::/><:ISSET:!:var=url:/><:VAR:/>value<::/><::/></div>
	</div><::/>
</div><::/>

<:OVER:list=MenuLists:/><:ISSET:var=prefix:/><div class="ListViewSection"><:VAR:/>prefix<::/></div><::/>
<div class="ListView"><:OVER:list=list:/><div class="ListItem" title="<:VAR:/>title<::/>">
		<div class="ListIcon">
			<:ISSET:var=icon:/><img <:ISSET:var=iconid:/>id="IMG_<:VAR:/>iconid<::/>" <::/>src="<:VAR:/>icon<::/>" onclick="ZoomIcon(<:VAR:/>iconid<::/>)"/><::/><:ISSET:!:var=icon:/>&nbsp;<::/>
		</div>
		<:ISSET:var=widget:/><:INCLUDE:/>widget<::/><::/><:ISSET:!:var=widget:/><div class="ListLabel"><span class="ListLabelContent">
			<a <:ISSET:var=iconid:/>id="LINK_<:VAR:/>iconid<::/>" <::/>href="<:ISSET:!:var=action:/><:VAR:/>url<::/>"<::/><:ISSET:var=action:/>#" onclick="<:VAR:/>action<::/>;return false;"<::/>><:VAR:/>name<::/></a>
		</span></div><::/>
	</div>
	<::/>
</div><::/>

<:INCLUDE:/>/generics/pager.html<::/>

<div class="Bermuda">
	<:OVER:list=MenuListsZoom:!:/><img id="ZOOM_IMG_<:VAR:/>id<::/>" class="BermudaItem" src="<:VAR:/>path<::/>" onload="UpdateSize(<:VAR:/>id<::/>)"/>
	<::/>
</div>

<style type="text/css">
	#ZoomDiv {
		position: absolute;
		visibility: hidden;
		z-index: 3;
	}
	#ZoomDiv img {
		border: 3px solid #444444;
	}
	#ZoomDiv, #ZoomDiv img {
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-khtml-border-radius: 10px;
		-moz-border-radius: 10px;
	}
	#ZoomBackDiv {
		background-image: url("<:VAR:/>THEME-URI<::/>/images/background-box-01.png");
		bottom: 0px;
		height: 100%;
		left: 0px;
		position: absolute;
		right: 0px;
		top: 0px;
		visibility: hidden;
		width: 100%;
		z-index: 2;
	}

	div.ListLabel span.ListLabelContent {
		white-space: nowrap;
		/* Starts with a small size then JS with fix it. This is to avoid
		 * unwanted expansions.
		 */
		max-width: 10px;
		display: inline-block;
		overflow-x: scroll;
	}
</style>

<div id="ZoomDiv"></div>
<div id="ZoomBackDiv">&nbsp;</div>

<script type="text/javascript">
	var zoomBackDiv = $("#ZoomBackDiv");

	zoomBackDiv.click(function() {
		zoomDiv.css({
			visibility: "hidden"
		});
		zoomBackDiv.css({
			visibility: "hidden"
		});
	});

	var zoomDiv = $("#ZoomDiv");

	var EnforceSize_times = 0;
	function EnforceSize() {
		$("span.ListLabelContent:first").each(function() {
			var width = $(this).parent().width();
			if(width < 40) {
				EnforceSize_times++;
				console.log("Enforcing Size: " + EnforceSize_times + ". Size: " + width);
				setTimeout("UpdateLabelSizes();", 500);
			}
		});
	}

	function OpenLink(id) {
		$("#LINK_" + id).trigger('click');
	}

	function ZoomIcon(id) {
		var img = $("#IMG_" + id);
		var zImg = $("#ZOOM_IMG_" + id);

		var x = img.offset().left + 10;
		var y = img.offset().top - (zImg.height() / 2) - (img.height() / 2);

		y = y - 10 < 1 ? 10 : y;
		y = y + zImg.height() + 10 > $(document).height() ? $(document).height() - zImg.height() - 10 : y;

		zoomDiv.html('<img src="' + zImg.attr("src") + '" onclick="OpenLink(' + id + ')"/>');
		zoomDiv.css({
			left: x,
			top: y,
			visibility: "visible",
		});
		zoomBackDiv.css({
			visibility: "visible"
		});
	}

	function UpdateLabelSizes() {
		$("span.ListLabelContent").each(function() {
			var width = $(this).parent().width();
			if($(this).width() < width) {
				$(this).css({
					"min-width": width,
					"width": width
				});
			}
			$(this).css({
				"max-width": width
			});
		});

		EnforceSize();
	}

	$(function() {
		UpdateLabelSizes();
	});
</script>